<template>
    <f7-page class="index" name="index">
        <f7-navbar>
            <f7-nav-center>叨叨</f7-nav-center>
        </f7-navbar>

        <!-- Page Content -->
        <f7-card class="news-card top-news self-card">
            <f7-card-header>
                <f7-link class="img-wrap" href="/news/detail/">
                    <img class="img-fit" src="../assets/images/test.jpg" alt="">
                </f7-link>
                <h2 class="tit">
                    <f7-link href="/news/detail/">质疑新加坡司法体系 李显龙侄子被新加坡总检署调查</f7-link>
                </h2>
            </f7-card-header>
            <f7-card-footer>
                <div class="news-info-bar clearfix">
                    <f7-link class="btn-comment" icon-fa="comment-o">3.5万</f7-link>
                    <span class="author-info">作者：王文清 09-03 12:30</span>
                </div>
                <div class="comments clearfix">
                    <div class="sketch">
                        <f7-link class="user-name">张大大</f7-link>,
                        <f7-link class="user-name">陈二二</f7-link>,
                        <f7-link class="user-name">王三三</f7-link>等15位正在叨叨
                    </div>
                    <ul class="list">
                        <li>
                            <f7-link class="user-role">角色名可以很长很长</f7-link>
                            <f7-link class="user-name">张大大:</f7-link>这个作者写的真是太好了
                        </li>
                        <li>
                            <f7-link class="user-role">角色名可以很长很长很长</f7-link>
                            <f7-link class="user-name">陈二二:</f7-link>这个作者写的真是太好了
                        </li>
                        <li>
                            <f7-link class="user-role">角色名可以很长很长很长很长</f7-link>
                            <f7-link class="user-name">王三三:</f7-link>这个作者写的真是太好了
                        </li>
                    </ul>
                    <f7-link class="link-more">75条好友叨叨>></f7-link>
                </div>
            </f7-card-footer>
        </f7-card>
        <f7-card class="news-card self-card sub-news-card">
            <f7-card-header>
                <h3 class="tit">
                    <f7-link href="/news/detail/">欧洲冠军联赛小组赛抽签，皇马、多特蒙德、热刺同组；巴塞罗那抽到尤文图斯；巴黎与拜仁同组。</f7-link>
                </h3>
                <f7-link class="img-wrap" href="/news/detail/">
                    <img class="img-fit" src="../assets/images/test.jpg" alt="">
                </f7-link>
            </f7-card-header>
            <f7-card-footer>
                <div class="news-info-bar clearfix">
                    <f7-link class="btn-comment" icon-fa="comment-o">3.5万</f7-link>
                    <span class="author-info">作者：王文清 09-03 12:30</span>
                </div>
                <div class="comments clearfix">
                    <div class="sketch">
                        <f7-link class="user-name">张大大</f7-link>,
                        <f7-link class="user-name">陈二二</f7-link>,
                        <f7-link class="user-name">王三三</f7-link>等15位正在叨叨
                    </div>
                    <ul class="list">
                        <li>
                            <f7-link class="user-role">角色名可以很长很长</f7-link>
                            <f7-link class="user-name">张大大:</f7-link>这个作者写的真是太好了
                        </li>
                        <li>
                            <f7-link class="user-role">角色名可以很长很长很长</f7-link>
                            <f7-link class="user-name">陈二二:</f7-link>这个作者写的真是太好了
                        </li>
                        <li>
                            <f7-link class="user-role">角色名可以很长很长很长很长</f7-link>
                            <f7-link class="user-name">王三三:</f7-link>这个作者写的真是太好了
                        </li>
                    </ul>
                    <f7-link class="link-more">75条好友叨叨>></f7-link>
                </div>
            </f7-card-footer>
        </f7-card>

        <f7-card class="news-card self-card">
            <f7-card-header>
                <h3 class="tit">
                    <f7-link href="/news/detail/">欧洲冠军联赛小组赛抽签，皇马、多特蒙德、热刺同组；巴塞罗那抽到尤文图斯；巴黎与拜仁同组。</f7-link>
                </h3>
                <f7-link class="img-wrap" href="/news/detail/">
                    <img class="img-fit" src="../assets/images/test.jpg" alt="">
                </f7-link>
            </f7-card-header>
            <f7-card-footer>
                <div class="news-info-bar clearfix">
                    <f7-link class="btn-comment" icon-fa="comment-o">3.5万</f7-link>
                    <span class="author-info">作者：王文清 09-03 12:30</span>
                </div>
                <div class="comments clearfix">
                    <div class="sketch">
                        <f7-link class="user-name">张大大</f7-link>,
                        <f7-link class="user-name">陈二二</f7-link>,
                        <f7-link class="user-name">王三三</f7-link>等15位正在叨叨
                    </div>
                    <ul class="list">
                        <li>
                            <f7-link class="user-role">角色名可以很长很长</f7-link>
                            <f7-link class="user-name">张大大:</f7-link>这个作者写的真是太好了
                        </li>
                        <li>
                            <f7-link class="user-role">角色名可以很长很长很长</f7-link>
                            <f7-link class="user-name">陈二二:</f7-link>这个作者写的真是太好了
                        </li>
                        <li>
                            <f7-link class="user-role">角色名可以很长很长很长很长</f7-link>
                            <f7-link class="user-name">王三三:</f7-link>这个作者写的真是太好了
                        </li>
                    </ul>
                    <f7-link class="link-more">75条好友叨叨>></f7-link>
                </div>
            </f7-card-footer>
        </f7-card>
        <p class="load-more">
            <f7-link>查看更多>></f7-link>
        </p>
        <main-toolbar></main-toolbar>
    </f7-page>
</template>

<style lang="scss">
@import "../assets/css/common.scss";
.news-card {
  .tit {
    a {
      height: auto;
      color: #333;
      line-height: 1.4;
    }
  }
}

.index {
  .top-news {
    .card-header {
      position: relative;
      display: block;
      padding: 0;

      .img-wrap {
        display: block;
        height: 160px;
        margin: 0 0 10px 0;
        overflow: hidden;

        img {
          display: block;
          min-height: 160px;
        }
      }

      .tit {
        display: block;
        padding: 10px 15px;
      }
    }
  }
  .load-more {
    text-align: center;
  }
}

.news-card {
  .card-header {
    padding: 15px 15px 10px 0;
    -webkit-align-items: stretch;
    align-items: stretch;

    .tit {
      -webkit-flex: 0.6;
      flex: 0.6;
      height: auto;
      line-height: 1.4;
      padding: 10px 15px;
      text-align: justify;
      zoom: 1;
      -webkit-align-items: stretch;
      align-items: stretch;
    }

    h2,
    h3 {
      &.tit {
        font-weight: normal;
        line-height: 1;
        font-size: 16px;
        margin: 0;
      }
    }

    h3 {
      &.tit {
        font-size: 14px;
      }
    }

    .img-wrap {
      -webkit-flex: 0.4;
      flex: 0.4;
      height: 90px;
      margin: 0;
      overflow: hidden;
    }

    img {
      display: block;
      width: 100%;
      min-height: 100%;
    }
  }

  .card-footer {
    display: block;

    .news-info-bar {
      margin-bottom: 10px;
      color: #ccc;

      .btn-comment {
        float: left;
        height: auto;
      }

      .author-info {
        float: right;
      }

      .icon {
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
      }

      a {
        color: #ccc;
      }
    }

    .comments {
      background: #fafafa;

      .sketch {
        padding: 0 15px;
        border-bottom: 1px solid #f0f1f3;
        color: #ccc;
      }

      a {
        display: inline;
        line-height: 2;
      }

      .user-name {
        color: #259b24;
      }

      .user-role {
        color: #e51c23;
      }

      ul {
        padding: 0 15px 0;
        margin: 0;
      }

      li {
        padding: 0;
        margin-bottom: 3px;
        text-align: justify;
      }

      .link-more {
        float: right;
        margin: 0 15px 0 0;
      }
    }
  }
}
</style>

<script>
import mainToolbar from "./components/mainToolbar.vue";
export default {
  components: {
    mainToolbar
  }
};
</script>
